<template>
    <view style="width: 44.7vw; max-width: 400rpx; border-bottom: 1px solid #f2f2f2" class="mb-sm" @click="$emit('click', item)">
        <view class="p-relative" style="width: 44.7vw; max-width: 400rpx; height: 44.7vw; max-height: 400rpx">
            <image :src="item.avatar" mode="aspectFill" class="rounded-26 fit" />
            <view class="p-absolute row items-center text-white fs-xxs" style="bottom: 10rpx; right: 10rpx; left: 10rpx">
                <view class="mx-sm">{{ item.housing_use == 1 ? $t('xin') : $t('ershou') }}</view>
                <template v-if="item.city_info">
                    |
                    <view style="margin: 0 8rpx">
                        <u-icon name="map" color="white" size="20rpx"></u-icon>
                    </view>
                    <view style="width: 26vw" class="text-nowrap">{{ item.city_info ? item.city_info['name' + $t('k')] : '' }} {{ item.region_info ? item.region_info['name' + $t('k')] : '' }}</view>
                </template>
            </view>
        </view>
        <view style="margin-top: 4rpx">
            <view class="fs-sm" style="overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical">{{ item['name' + $t('k1')] }}</view>
            <view class="row items-center text-gray mt-xs" style="font-size: 22rpx">
                <view>{{ item.bedroom }}{{ $t('shi') }} {{ item.parlor }}{{ $t('ting') }}</view>
                <span class="mx-xs">|</span>
                <view>{{ item.square_num }}{{ $t('pingfangmi1') }}</view>
                <span class="mx-xs">|</span>
                <view>{{ directionList[item.direction].label }}</view>
            </view>
            <view class="row items-center my-xs" style="color: #79b8a3" v-if="item.tag && item.tag.length > 0">
                <view class="tag" v-for="(tag, i) in item.tag" :key="i">{{ tag['tag_name' + $t('k1')] }}</view>
            </view>
            <view class="row items-center justify-between mt-xs">
                <view class="row items-center">
                    <view class="text-red fs-sm">{{ $tools.formatNumber(item.price) }}</view>
                </view>
                <view class="text-gray row items-center" v-if="item.square_price > 0">
                    <span v-if="$t('dir') == 'ltr'" style="font-size: 18rpx; margin-bottom: -2px">￥</span>
                    <span class="fs-sm" v-if="item.square_price">{{ parseInt(item.square_price) }}</span>
                    <span v-if="$t('dir') == 'rtl'" style="font-size: 18rpx; margin-bottom: -2px">￥</span>
                    <span class="fs-xs" style="margin: 0 2px">/m²</span>
                </view>
            </view>
            <!-- <view class="fs-xs row items-center" style="color: green" v-if="item.commission">
                <view>{{ $t('yongjin') }}</view>
                <view class="mx-xs">{{ item.commission }}%</view>
            </view> -->
        </view>
    </view>
</template>
<script>
export default {
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            directionList: [
                { label: '', val: '' },
                { label: this.$t('dong'), val: 1 },
                { label: this.$t('nan'), val: 2 },
                { label: this.$t('xi'), val: 3 },
                { label: this.$t('bei'), val: 4 },
                { label: this.$t('dongxi'), val: 5 },
                { label: this.$t('nanbei'), val: 6 },
                { label: this.$t('dongnan'), val: 7 },
                { label: this.$t('xinan'), val: 8 },
                { label: this.$t('dongbei'), val: 9 },
                { label: this.$t('xibei'), val: 10 },
            ],
        }
    },
    methods: {},
}
</script>
<style scoped>
.tag {
    background: #ddf2eb;
    border-radius: 26rpx;
    padding: 2rpx 8rpx;
    font-size: 20rpx;
    margin: 0 4rpx;
}
</style>